<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
          integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
</head>
<script>
    let modify = 1;
    function clear() {
        $("#id").val("");
        $("#name").val("");
        $("#age").val("");
        $("#male").prop('checked', false);
        $("#female").prop('checked', false);
        $("#phone").val("");
        $("#address").val("");
    }

    function add() {
        modify = 1;
        clear();
        $(".modal-title").html("家长信息添加");
    }

    function save() {
        let name = $("#name").val();
        let age = $("#age").val();
        let address = $("#address").val();
        let maleCheck = document.getElementById("male").checked;
        let femaleCheck = document.getElementById("female").checked;
        if (name == '') {
            alert("请输入姓名!");
        } else if (age == '') {
            alert("请输入年龄!");
        } else if (!maleCheck && !femaleCheck) {
            alert("请选择性别!");
        } else if (address == '') {
            alert("请输入地址!");
        } else {
            let formData = new FormData($("#editForm")[0]);
            $.ajax({
                url: "http://localhost:313/parent/personalAdd",
                method: "post",
                data: formData,
                dataType: "json",
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (res) {
                    window.location.href="http://localhost:313/parent/getById";
                }
            });
        }
    }
</script>
<body onload="genderLoad()">
<h1>家长信息</h1>
<button id="add" class="btn btn-primary" data-toggle="modal" data-target="#editModal" th:onclick="add()">新建我的信息
</button>


<div class="modal fade" tabindex="-1" role="dialog" id="editModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h2 class="modal-title"></h2>
            </div>
            <div class="modal-body">
                <form id="editForm">
                    <table class="table table-bordered table-striped">
                        <input id="id" class="form-control" type="hidden" name="id" hidden/>
                        <tr>
                            <td>姓名</td>
                            <td><input id="name" class="form-control" type="text" name="name"/></td>
                        </tr>
                        <tr>
                            <td>年龄</td>
                            <td><input id="age" class="form-control" type="number" name="age"/></td>
                        </tr>
                        <tr>
                            <td>性别</td>
                            <td><input id="male" type="radio" name="gender" value="0"/>男 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input
                                    id="female" type="radio" name="gender" value="1"/>女
                            </td>
                        </tr>
                        <tr>
                            <td>电话</td>
                            <td>
                                <input id="phone" class="form-control" type="number" name="phone"/>
                            </td>
                        </tr>
                        <tr>
                            <td>地址</td>
                            <td><input id="address" class="form-control" type="text" name="address"/></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>